<template>
	<view>
		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" :title="title" :autoBack="true" placeholder
			bgColor="transparent">
		</up-navbar>
		<up-empty v-if="result.list.length ===0 " mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
		</up-empty>
		<view class="item border-box" v-for="item in result.list" :key="item.id">
			<postUser :item="item" />
			<up-gap height="44rpx"></up-gap>
			<postIndex :item="item" self />
		</view>
		<up-back-top :scrollTop="scrollTop" :iconStyle="iconStyle" :duration="200" :bottom="20"></up-back-top>
		<up-gap height="160rpx"></up-gap>
	</view>
</template>

<script setup>
	import postUser from "@/components/post/user.vue"
	import postIndex from "@/components/post/index.vue"
	import openApi from "@/api/biz/open.js"
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app"
	const iconStyle = {
		fontSize: '32rpx',
		color: '#2979ff'
	};
	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	onReachBottom(() => {
		if (result.list.length >= result.total) return;
		params.pageNo++;
		page()
	})

	const result = reactive({
		list: [],
		total: 0
	})
	const params = reactive({
		pageNo: 1
	})

	function getStrategyCollectList() {
		openApi.getStrategyCollectList({
			pageNo: params.pageNo,
			pageSize: 10,
		}).then(res => {
			if (res.code === 0) {
				resultLogic(res)
			}
		})
	}

	function getStrategyCommentList() {
		openApi.getStrategyCommentList({
			pageNo: params.pageNo,
			pageSize: 10,
		}).then(res => {
			if (res.code === 0) {
				resultLogic(res)
			}
		})
	}

	function getStrategyCommentRecordList() {
		openApi.getStrategyCommentRecordList({
			pageNo: params.pageNo,
			pageSize: 10,
		}).then(res => {
			if (res.code === 0) {
				resultLogic(res)
			}
		})
	}

	function resultLogic(res) {
		result.total = res.data.total;
		if (params.pageNo === 1) result.list = res.data.list;
		else result.list = result.list.concat(res.data.list)
	}

	const title = ref("");
	onLoad((option) => {
		if (option.type === '1') {
			title.value = "获赞列表"
			getStrategyCommentRecordList()
		} else if (option.type === '2') {
			title.value = "评论列表"
			getStrategyCommentList()
		} else if (option.type === '3') {
			title.value = "收藏列表"
			getStrategyCollectList()
		}
	})
</script>

<style>
	page {
		background-color: #1B1829;
	}
</style>
<style scoped lang="scss">
	.item {
		padding: 46rpx 20rpx;
		width: 690rpx;
		background: #25223B;
		border-radius: 16rpx;
		margin: 30rpx auto 0;
	}
</style>